{include "INC_header.html" title="订单详情"}
<div id="app-outlet" class="page-outlet">
    <div class="page-header border-bottom">
        <div class="padding iui flex-item">
            <div class="center text-bold text-center">统一收银台</div>
        </div>
    </div>
    <div class="page-content">
        <div class="padding margin text-center">
            <div class="text-maximum orange-text">
                <i class="fa-solid fa-yen-sign"></i>
            </div>
            <div class="text-bigger">{{ ticket.amount }}{{ ticket.currencyUnit }}</div>
            <div class="delete-text" v-if="ticket.amount != ticket.payAmount">{{ ticket.payAmount }}{{ ticket.currencyUnit }}</div>
            <div class="medium-text text-small">{{ ticket.orderName }}</div>
        </div>
        <div class="info-items padding-top padding-bottom">
            <div class="ui flex-item info-item">
                <div class="center">支付状态</div>
                <div class="end">
                    {{ ticket.payed == 1 ? '已完成支付' : '等待支付' }}
                </div>
            </div>
            <div class="ui flex-item info-item">
                <div class="center">订单总金额</div>
                <div class="end medium-text">{{ ticket.payAmount }}{{ ticket.currencyUnit }}</div>
            </div>
            <div class="ui flex-item info-item">
                <div class="center">已支付</div>
                <div class="end medium-text">{{ ticket.payedAmount }}{{ ticket.currencyUnit }}</div>
            </div>
            <div class="ui flex-item info-item">
                <div class="center">剩余未支付</div>
                <div class="end orange-text">{{ ticket.amount }}{{ ticket.currencyUnit }}</div>
            </div>
            <div class="ui flex-item info-item" v-if="ticket.info !== '' && ticket.info !== null">
                <div class="center">订单信息</div>
                <div class="end medium-text">{{ ticket.info }}</div>
            </div>
        </div>
        <div class="padding-top text-center" v-if="ticket.payed == 0">
            <div class="ui button block bigger" @click="pay()">立即支付</div>
        </div>
    </div>
    <div class="page-footer">
        <div class="text-center padding">
            <a href="/" class="text-small">返回</a>
        </div>
    </div>
</div>
<script>
    const UA = navigator.userAgent.toLowerCase();
    const clientName = /micromessage/.test(UA) ? "wechat" : (/alipayclient/.test(UA) ? "alipay" : "H5");
    //vue app
    const { createApp, defineComponent, ref } = Vue;
    const { message, Modal } = antd;
    const app = createApp({
        data() {
            return {
                //
                orderId: "{$get.orderId|default:'0'}",
                orderType: "{$get.orderType|default:''}",
                //数据
                ticket: {
                    amount: '读取中...',
                    payAmount: '读取中...',
                    payedAmount: '0.00',
                    orderId: '读取中...',
                    orderName: '读取中...',
                    currency: 'CNY',
                    currencyName: '人民币',
                    currencyUnit: '元',
                    info: null,
                    payed: 0
                }
            }
        },
        mounted() {
            this.initData();
        },
        methods: {
            initData() {
                let self = this;
                axios.get("{url url='/finance/api/cashier/prepay'}", {
                    params: {
                        orderId: this.orderId,
                        orderType: this.orderType
                    }
                }).then(({ data }) => {
                    if (data.error === 0) {
                        self.ticket = data.data;
                    } else {
                        message.error(data.message, 5);
                    }
                }).catch(() => {
                    message.error("服务端繁忙", 5);
                });
            },
            pay() {
                let self = this;
                const hide = message.loading("正在检测...", 0);
                axios.post("{url url='/finance/api/cashier/generate'}", {
                    orderType: self.orderType,
                    orderId: self.orderId
                }).then(({ data }) => {
                    hide();
                    if (data.error === 0) {
                        //得到单据ID
                        self.onlinePay(data.data.id);
                    } else {
                        //需要根据不同步错误参数进行操作
                        message.error(data.message, 5);
                    }
                }).catch(() => {
                    hide();
                    message.error("服务端繁忙，请稍后再试", 5);
                });
            },
            onlinePay(id) {
                let self = this;
                const hide = message.loading("正在调用支付...", 0);
                axios.post("{url url='/finance/api/cashier/onlinePay'}", {
                    //单据ID
                    id,
                    //支付方式
                    payment: clientName,
                    //支付参数
                    params: {
                        clientName: clientName === "wechat" ? "JSAPI" : clientName
                    }
                }).then(({ data }) => {
                    hide();
                    if (data.error === 0) {
                        let res = data.data;
                        if (res.payed === 1) {
                            //订单已支付过了
                            message.warning("该订单已支付，无需重复操作");
                            self.ticket.payed = 1;
                        }
                        if (res.redirectUrl !== null && res.redirectUrl !== '') {
                            window.location.href = res.redirectUrl;
                        }
                        console.log(res.data);
                    } else {
                        //需要根据不同步错误参数进行操作
                        message.error(data.message, 5);
                    }
                }).catch(() => {
                    hide();
                    message.error("服务端繁忙，请稍后再试", 5);
                });
            }
        }
    }).use(antd);
    //挂载
    const vm = app.mount("#app-outlet");
</script>
{include "INC_footer.html"}